<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>标签管理</title>
<#include "/WEB-INF/content/module-edit.html">
<script src="${request.contextPath}/res/kindeditor/kindeditor.js"></script>
<script src="${request.contextPath}/res/kindeditor/lang/zh_CN.js"></script>
<script type="text/javascript">
var tag=[
   	{"id":"red","text":"红色"},
   	{"id":"blue","text":"蓝色"}
];
var ismain=[
	{"id":"0","text":"否"},
	{"id":"1","text":"是"}
];
var max=${array?size};
$(function(){
	init();
 });
 
 function init(){
	 if(max==0){
		 plus(1);
	 }else{
		 for(var i=1;i<=max;i++){
			 loadPlug(i);
		 }
	 }
 }
 
 function mis(i){
	var url= moduleUrl.substring(0, moduleUrl.lastIndexOf("/"));
	var _id=$("#_id"+i).val();
	if (_id == "") {
		$("#form"+i).remove();
		if($("#p").find("form").length==0){
			plus(1);
		}
	} else {
		if(confirm("确定要删除该记录吗?")){
			url=url+"/delete";
			$("#form"+i).ajaxSubmit({
				url : url,
				success : function(data) {
					if (data.state) {
						top.showMsg("操作成功");
						$("#form"+i).remove();
						if($("#p").find("form").length==0){
							plus(1);
						}						
					} else {
						top.showMsg("操作失败");
					}
				}
			});		
		}
	}
 }

function sub(i){
	if (!$("#form"+i).form('validate'))
		return; 
	
	var url= moduleUrl.substring(0, moduleUrl.lastIndexOf("/"));
	var _id=$("#_id"+i).val();
	if (_id == "") {
		url += "/create";
	} else {
		url += "/update";
	}
	$("#form"+i).ajaxSubmit({
		url : url,
		success : function(data) {
			if (data.state) {
				if(_id==""){
					$("#_id"+i).val(data.info);
				}
				top.showMsg("操作成功");
			} else {
				top.showMsg("操作失败");
			}
		}
	});		
}

function plus(i){
//	将model层隐藏，它将作为所有表单的模板，每个元素都加一个属性col用来记录当前form所属的编号
	var model=$("#model").html();
	model=model.replace('id="form"','id="form'+i+'"');
	model=model.replace('id="_id"','id="_id'+i+'"');
	model=model.replace('id="tag_color"','id="tag_color'+i+'"');
	model=model.replace('id="is_main"','id="is_main'+i+'"');
	model=model.replace('id="tag_text"','id="tag_text'+i+'"');
	model=model.replace('plus(','plus('+(i+1));
	model=model.replace('sub(','sub('+i);
	model=model.replace('mis(','mis('+i);
	
	$("#p").append(model);
	loadPlug(i);
	max=i;
}

function loadPlug(i){
	$("#tag_color"+i).combobox({
		valueField : 'id',
		textField : 'text',
		editable:false,
		data:tag		
	});
	$("#is_main"+i).combobox({
		valueField : 'id',
		textField : 'text',
		editable:false,
		data:ismain		
	});
	$("#tag_text"+i).validatebox({
  		required:true
  	});
}
</script>
<style>
.input-width{
	width: 95%;
}
</style>
 
</head>
<body class="easyui-layout">
<div id="model" style="display:none;">
	<form id="form" method="post">
		<table class="form" cellspacing="0" style="width: 100%">
			<tbody style="border: 1px solid #ccc">
				<tr style="display: none;">
					<td colspan="3"><input id="_id" name="id" value=""></td>
					<td colspan="3"><input id="pid" name="pid" value="${(_id)!}"></td>
				</tr>
				<tr>
					<td class="label">标签颜色：</td>
					<td><input id="tag_color" name="tag_color" value="${object.tag_color ! 'red'}" /></td>
					<td class="validate"></td>	
					<td class="label">标签内容：</td>
					<td><input id="tag_text" name="tag_text" value="${object.tag_text !}" class="easyui-validatebox" required="true"/></td>
					<td class="validate">*</td>								
				</tr>		
				<tr>
					<td class="label">是否首页展示：</td>
					<td><input id="is_main" name="is_main" value="${object.is_main ! 0}" /></td>
					<td class="validate"></td>
				</tr>						
			</tbody>
		</table>
		<div style="margin-left:40%;">
			<a class="easyui-linkbutton" style="margin:1rem;" iconCls="icon-add" href="javascript:plus()">添加标签</a>
			<a class="easyui-linkbutton" style="margin:1rem;" iconCls="icon-save" href="javascript:sub()">提交</a>
			<a class="easyui-linkbutton" style="margin:1rem;" iconCls="icon-remove" href="javascript:mis()">删除标签</a>
		</div>
	</form>
</div>
	<div region="center">
		<div id="p" class="easyui-panel" style="background: #fafafa; padding: 10px" fit="true" toolbar="#toolbar">
			<#list array as item>
			<form id="form${item_index+1}" method="post">
				<table class="form" cellspacing="0" style="width: 100%">
					<tbody style="border: 1px solid #ccc">
						<tr style="display: none;">
							<td colspan="3"><input id="_id${item_index+1}" name="id" value="${(item.id)!}"></td>
							<td colspan="3"><input id="pid" name="pid" value="${(_id)!}"></td>
						</tr>
						<tr>
							<td class="label">标签颜色:</td>
							<td><input id="tag_color${item_index+1}" name="tag_color" value="${item.tag_color ! 'red'}" /></td>
							<td class="validate"></td>
							<td class="label">标签内容:</td>
							<td><input id="tag_text${item_index+1}" name="tag_text" value="${item.tag_text!}" class="easyui-validatebox" required="true"/></td>
							<td class="validate">*</td>								
						</tr>						
						<tr>
							<td class="label">是否首页展示：</td>
							<td><input id="is_main${item_index+1}" name="is_main" value="${item.is_main ! 0}" /></td>
							<td class="validate"></td>
						</tr>
					</tbody>
				</table>
				<div style="margin-left:40%;">
					<a class="easyui-linkbutton" style="margin:1rem;" iconCls="icon-add" href="javascript:plus(${item_index+2})">添加标签</a>
					<a class="easyui-linkbutton" style="margin:1rem;" iconCls="icon-save" href="javascript:sub(${item_index+1})">提交</a>
					<a class="easyui-linkbutton" style="margin:1rem;" iconCls="icon-remove" href="javascript:mis(${item_index+1})">删除标签</a>
				</div>
			</form>
			</#list>
		</div>
	</div>
</body>
</html>